<template>
  <div id="warningList">
    <!-- 头信息 -->
    <!-- <div class="title">
      <span class="chinese">预警信息</span>
      <span class="english">WARNING INFO</span>
    </div>-->
    <s-title text="统计组列表" :btnshow="false" />
    <div class="content">
      <div class="rollTitle">
        <el-row>
          <el-col :span="8">时间</el-col>
          <el-col :span="10">名称</el-col>
          <el-col :span="4">状态</el-col>
          <!-- <el-col :span="4">级别</el-col> -->
        </el-row>
      </div>
      <div class="vue-seamless" @click="showTurnDetails($event)">
        <vue-seamless-scroll :data="warningDataList" class="seamless-warp">
          <div v-for="(item, index) in warningDataList" :key="index" class="warningDataListItem">
            <el-row>
              <el-col :span="8" :data-obj="JSON.stringify(item)">{{dateStr[index]}}</el-col>
              <el-col
                :span="10"
                class="fontName"
                :data-obj="JSON.stringify(item)"
              >{{ item.name|name }}</el-col>
              <!-- <el-col :span="10" :data-obj="JSON.stringify(item)">{{ item.regionId }}</el-col> -->
              <el-col :span="4">
                <span
                  :data-obj="JSON.stringify(item)"
                  :class="{
                    level1: item.statType === 0,
                    level2: item.statType === 1
                  }"
                >{{ item.statType | statType }}</span>
              </el-col>
            </el-row>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import axios from "axios";
// import { createYjxx } from "../../../../static/JS/WorkAction";
export default {
  name: "warningList",
  components: {
    sTitle,
    vueSeamlessScroll
  },
  data() {
    return {
      dateStr: [],
      warningDataList: [
        // {
        //   date: "2021.06.05 12:25",
        //   weather: "暴雨 风力小于3级",
        //   resource: "长沙市气象局",
        //   level: 4
        // },
        // {
        //   date: "2021.06.05 12:25",
        //   weather: "中雨 风力5级",
        //   resource: "湖南气象局",
        //   level: 3
        // },
        // {
        //   date: "2021.06.05 12:25",
        //   weather: "中雨 风力小于3级",
        //   resource: "国家气象局",
        //   level: 2
        // },
        // {
        //   date: "2021.06.05 12:25",
        //   weather: "暴雨 风力小于3级",
        //   resource: "长沙市气象局",
        //   level: 4
        // },
        // {
        //   date: "2021.06.05 12:25",
        //   weather: "小雨 风力1级",
        //   resource: "湖南气象局",
        //   level: 1
        // },
        // {
        //   date: "2021.06.05 12:25",
        //   weather: "中雨 风力小于3级",
        //   resource: "湖南气象局",
        //   level: 2
        // }
      ]
    };
  },
  methods: {
    async loadManager() {
      debugger;
      var params = new URLSearchParams();
      params.append("pageNo", 1);
      params.append("pageSize", 21);
      params.append("ids", "");
      await axios
        .post(this.$videoIp + "/GetStatisticsgrouplist", params)
        .then(res => {
          this.warningDataList = res.data.data.list;
          console.log(this.warningDataList);
          for (var i = 0; i < this.warningDataList.length; i++) {
            this.dateStr.push(
              this.$moment(this.warningDataList[i].updateTime).format(
                "YYYY-MM-DD"
              )
            );
          }
        });
    }
    // // 进行撒点
    // showTurnDetails(e) {
    //   // 获取当前行的信息
    //   let value = JSON.parse(e.target.dataset.obj);
    //   // 根据当前行信息中level的等级生成
    //   let src = `http://localhost:8086/static/img/icon/yj${value.level}.png`;
    //   //   createYjxx(src,'yjxx');
    // }
  },
  filters: {
    name: function(value) {
      var tem;
      switch (value) {
        case "A裙楼南大门客流相机-东":
          tem = "A楼南门-东";
          break;
        case "A裙楼南大门客流相机-西":
          tem = "A楼南门-西";
          break;

        case "萧县政务中心客流统计":
          tem = "政务中心客流";
          break;

        default:
          tem = value;
          break;
      }
      return tem;
    }
  },
  mounted() {
    this.loadManager();
    // for (var i = 0; i < this.warningDataList.length; i++) {
    //   this.dateStr.push(
    //     this.$moment(this.warningDataList[i].updateTime).format(
    //       "YYYY-MM-DD"
    //     )
    //   );
    // }
  }
};
</script>

<style scoped>
/* 整个文件的样式 */
/* #warningList {
  width: 752px;
  height: 463px;
  background-image: url(../../../../static/img/yjzh/left/tableBackground.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 40px;
} */
#warningList {
  width: 100%;
  height: 23vh;
  margin-top: 10px;
}
/* 标题头的样式 */
.title {
  position: absolute;
  left: 50px;
  top: 6px;
}
/* 左侧中文 */
.title .chinese {
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  margin-right: 20px;
}
/* 右侧英文 */
.title .english {
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2ed3ec;
}
/* 内容区域的样式 */
.content {
  padding-top: 6px;
  height: 192px;
  width: 94%;
  margin: 0 auto;
}

/* 滚动列表的样式 */
.seamless-warp {
  height: 120px;
  overflow: hidden;
  margin-top: 5px;
}
.rollTitle {
  text-align: center;
  color: white;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  background: rgba(0, 143, 253, 0.4) !important;
}
.warningDataListItem {
  text-align: center;
  color: white;
  font-size: 10px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #fff;
  user-select: none;
  -webkit-user-select: none;
}
.fontName {
  color: rgba(84, 219, 163, 0.973);
}
.level1,
.level2,
.level3,
.level4 {
  display: inline-block;
  width: 60px;
  height: 20px;
  line-height: 20px;
  border-radius: 4px;
  background-color: #d60a0a;
}
.level2 {
  background-color: #d7660b;
}
.level3 {
  background-color: #ba9f0a;
}
.level4 {
  background-color: #0a6fd6;
}
</style>
